<template>
  <hx-page>
    <div class='card_balance'>
      <div class='card_balance_item'>
        <div>{{ subAvailable === 'F' ? '当前' : '主账户' }}余额</div>
        <div>{{ balance.toFixed(2) }}元</div>
      </div>
      <div class='card_balance_item' v-if="subAvailable !== 'F'">
        <div>补助金余额</div>
        <div>{subBalance.toFixed(2)}元</div>
      </div>
      <div class='card_balance_item' v-if="maccBalance !== 0">
        <div>当前欠款</div>
        <div>{maccBalance.toFixed(2)}元</div>
      </div>
    </div>

    <div class='card_balance_tip'>
      <div class='card_balance_tip_con' v-if="maccBalance !== 0">下次充值时优先抵扣欠款</div>
    </div>

    <button class='hxButton' @click="goBack">返回</button>
  </hx-page>
</template>

<script>
import {hxParam} from "../../config/hx-param";
import {HxPost} from "../../service/http";

export default {
  name: "balance",
  data() {
    return {
      cardInfo: null,
      balance: 0,
      subAvailable: 'F',
      subBalance: 0,
      maccBalance: 0,
    }
  },
  onLoad(e) {
    this.cardInfo = JSON.parse(e.cardInfo)
    uni.showLoading({title: '正在查询余额...', mask: true})
        .then(() => {
          return HxPost('balance', {cardId: hxParam.cardId});
        })
        .then((res) => {
          uni.hideLoading();
          this.balance = res.balance - res.subBalance;
          this.subAvailable = res.subAvailable;
          this.subBalance = res.subBalance;
          this.maccBalance = res.maccBalance;
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({title: err.retMsg || '未知错误', icon: 'none', duration: 2 * 1000}).catch();
        });
  },
  methods: {
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style scoped lang="scss">
.card_balance {
  background: #FFFFFF;
  color: #000;
  font-size: 14PX;
  font-weight: 700;
  display: flex;
  flex-direction: column;

  &_item {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
    padding: 10PX 16PX;
  }

  &_tip {
    padding: 16PX;
    font-size: 14PX;
    color: #b71120;
    font-weight: 700;

    &_con {
      position: relative;
      padding-left: 8PX;
    }

    &_con::before {
      content: '*';
      position: absolute;
      top: 3PX;
      left: 0;
    }
  }
}
</style>
